<script setup lang="ts">
import { trimBlank } from '@vc/utils';
import message from 'vc/src/common/message';
import { ref } from 'vue';
import { genFileId } from 'element-plus';
import { useUserStore } from '../../../store/modules/user';
import { changeAvatar, userEdit } from '../apis/profile';

interface Props {
  showDialog: boolean;
}

const {
  showDialog
} = defineProps<Props>();

const emit = defineEmits(['update:showDialog']);

const upload = ref();
let uploadFile = $ref();
const userStore = useUserStore();
const handleExceed = (files) => {
  upload.value!.clearFiles();
  const file = files[0];
  file.uid = genFileId();
  upload.value!.handleStart(file);
};

const { data, run } = useRequest(changeAvatar, {
  manual: true
});

const { run: reqEditAvatar, loading } = useRequest(userEdit, {
  manual: true,
  onSuccess: (res) => {
    userStore.setUserInfo(res);
  }
});

const handleChange = (_uploadFile) => {
  const isJpgOrPng = _uploadFile.raw.type === 'image/jpg' || _uploadFile.raw.type === 'image/jpeg' || _uploadFile.raw.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('支持的文件格式为：jpg/jpeg/png');
    upload.value!.clearFiles();
    return false;
  } else if (_uploadFile.raw.size / 1024 / 1024 > 1) {
    message.error('图片大小不能超过 1 MB!');
    upload.value!.clearFiles();
    return false;
  } else {
    uploadFile = _uploadFile.raw;
  }
};

const handleSubmit = () => {
  if (uploadFile) {
    run(uploadFile).then(() => {
      const uuid = data.value?.[0]?.uuid;
      if (uuid) {
        reqEditAvatar({ photo: uuid }).then((res) => {
          message.success('修改成功');
          close();
        });
      }
    });
  } else {
    message.error('请上传图片');
  }
};

function close () {
  emit('update:showDialog', false);
}
</script>

<template>
  <vc-dialog title="修改头像" :modelValue="showDialog" @close="close"
    :height="350" :width="500">
    <div class="content">
      <span class="text-14px mb-15px block text-[#242934]">
        请上传新头像
      </span>
      <el-upload ref="upload" list-type="picture-card"
        :on-exceed="handleExceed"
        :on-change="handleChange"
        :auto-upload="false"
        :limit="1"
      >
        <vc-icon icon="vi-add" />
        <template #file="{ file }">
          <div class="w-full text-center">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          </div>
        </template>
      </el-upload>

      <div class="fr mt-20px">
        <el-button class="change-color" @click="emit('update:showDialog', false)">取消</el-button>
        <el-button :loading="loading" type="primary" color="#02C680" style="color:#FFFFFF;" @click="handleSubmit">确定</el-button>
      </div>
    </div>
  </vc-dialog>
</template>

<style lang="scss" scoped>
.content {
  padding: 20px;
}
:deep(.content){
  .el-upload--picture-card:hover,.el-upload:focus{
    color: #02C680;
    border-color: #02C680;
  }
}

:deep(.change-color){
  &:hover{
    color: #02C680;
    background-color: rgba(231,247,243,0.3);
    border-color: #02C680;
  }
  &:focus{
    color: #02C680;
    background-color: rgba(231,247,243,0.3);
    border-color: #02C680;
  }
}
</style>
